 .popup {
   opacity: 0;
   visibility: hidden;
   height: 100vh;
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba($color: $color-black, $alpha: .8);
   z-index: 9999;
   transition: all .3s;


   // 判断浏览器是否支持
   @supports (-webkit-backdrop-filter: blur(10px)) or (back-filter: blur(10px)) {
     -webkit-backdrop-filter: blur(10px);
     back-filter: blur(10px);
     background-color: rgba($color: $color-black, $alpha: .3);
   }

   &:target {
     opacity: 1;
     visibility: visible;
   }

   &:target &__content {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }

   &__close {

     &:link,
     &:visited {
       color: $color-grey-dark;
       position: absolute;
       top: 2.5rem;
       right: 2.5rem;
       font-size: 3rem;
       text-decoration: none;
       display: inline-block;
       transition: all .2s;
       line-height: 1;
     }

     &:hover {
       color: $color-primary;
     }
   }

   &__content {
     @include absCenter;
     width: 75%;
     background-color: $color-white;
     box-shadow: 0 2rem 4rem rgba($color: $color-black, $alpha: .1);
     // 浏览器会自动分配相同高度
     display: table;
     overflow: hidden;
     opacity: 0;
     transform: translate(-50%, -50%) scale(.5);
     transition: all .5s .2s;

     @include respond(tab-land) {
       width: 95%;
     }

     @include respond(tab-port) {
       width: 100%;
     }
   }

   &__left {
     width: 33.333333%;
     display: table-cell;

     @include respond(phone) {
       display: block;
       width: 100%;
     }
   }

   &__right {
     width: 66.6666667%;
     display: table-cell;
     vertical-align: middle;
     padding: 3rem 5rem;

     @include respond(tab-port) {
       padding: 1rem 1rem;
     }

     @include respond(phone) {
       display: block;
       width: 100%;
     }
   }

   &__img {
     display: block;
     width: 100%;

     @include respond(phone) {
       display: inline-block;
       width: 49.7%;
     }
   }

   // 段落拆分
   &__text {
     font-size: 1.4rem;
     margin-bottom: 4rem;

     -moz-column-count: 2;
     -moz-column-gap: 4rem;
     -moz-column-rule: 1px solid $color-grey-light-2;

     column-count: 2;
     column-gap: 4rem;
     column-rule: 1px solid $color-grey-light-2;

     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -webkit-hyphens: auto;
     hyphens: auto;

     @include respond(tab-port) {
       -moz-column-count: 1;
       -moz-column-gap: 1rem;
       -moz-column-rule: none;

       column-count: 1;
       column-gap: 1rem;
       column-rule: none;

       margin-bottom: 2rem;
     }
   }
 }